iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0
自我挑戰組

寫程式帶給我的無形快樂系列 第 8

[前言] 寫出好讀好寫的 JS

  • 分享至 

  • xImage
  •  

簡寫用的"恰當",可以讓整份程式碼變的很好閱讀
就像一篇充滿語助詞或贅詞的文章和一篇 行數少一半 用字遣詞很精準 的文章

用 Vue 的 util.ts 這個檔案當作例子,可以發現 if...else else if 用的很少

每一個 function 幾乎都不超過 10 行

例如:

export function toString(val: any): string {
  return val == null
    ? ''
    : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
    ? JSON.stringify(val, null, 2)
    : String(val)
}
export function isPromise(val: any): val is Promise<any> {
  return (
    isDef(val) &&
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}

看到 && || ? ... : ... 這些都是簡寫的方式!


簡寫之前,先複習 Logical operators (邏輯運算子)

以下範例及內容皆取自
Logical operators
Nullish coalescing operator '??'

『 運算式是由運算元和運算子組成 』

『 邏輯運算子用來判斷運算式的真或假,結果只會有 truefalse

JavaScript 有四個邏輯運算子

  1. || (OR)
  2. && (AND)
  3. ! (NOT)
  4. ?? (Nullish Coalescing) (中文: 空值合併運算子)

|| (OR)

|| 有四種可能的組合

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

遇到不是 Boolean 值的運算元,會先轉成 Boolean,再來比較

『 除非所有的運算元都為 false,否則結果都為 true
(白話: 抓到一個 true,就算你 true)

|| 用在 if 條件式的話,可以用來驗證眾多條件中是否有一個條件成立

let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  alert( 'The office is closed.' ); // it is the weekend
}

還可以用在賦值上

result = value1 || value2 || value3;
// 1. 從左至右檢查運算元
// 2. 每一個運算元都會被轉成 boolean,一旦結果是 true,馬上停止,並回傳運算元原始的值
// 3. 如果全部的運算元都是 false,會回傳最後一個運算元

『 回傳的都是原始值,不會被轉換』
|| 回傳找到的第一個 truthy 值; 或是最後一個值 』

|| 常使用在:

  1. 多個變數或表達式中取得第一個 truthy 值
  2. Short-circuit evaluation (短路求值) (補充:運算元也可以是一個表達式,例如執行函式或是變數賦值,如下方範例)
// Short-circuit evaluation
true || alert("not printed");
false || alert("printed");
// 結果會執行 alert("printed")

&& (AND)

同樣的, && (AND) 也是類似的規則

result = value1 && value2 && value3;
// 1. 從左到右對運算元進行估值
// 2. 將每一個運算元轉成 boolean,如果遇到結果為 false,馬上停止,立即回傳這個運算元的值
// 3. 假設所有的運算元都已經被運算了(全部為 truthy),回傳最後一個運算元

&& 回傳遇到的第一個 falsy 值,或是最後一個值 』

例如:

alert( 1 && 2 && null && 3 ); // null
alert( 1 && 2 && 3 ); // 3, the last one

!(NOT)

  1. 用來將運算元轉換成 boolean
  2. 回傳 inverse value (true--> false; false--> true)
alert( !true ); // false
alert( !0 ); // true

!! 常用來把值轉換成 Boolean
第一個 ! 將值轉換成 boolean,並回傳 inverse value
第二個 ! 又再 inverse value 一次


?? (Nullish coalescing)

回傳第一個不為 null/undefined 的值

result = a ?? b 等於 result = (a !== null && a !== undefined) ? a : b;

最常用來給預設值

例如:

let user;
alert(user ?? "Anonymous"); // Anonymous (user not defined)
let user = "John";
alert(user ?? "Anonymous"); // John (user defined)

一樣也可以用在一系列的變數中,找出有定義的那個值

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// shows the first defined value:
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

??|| 的差異

let height = 0;

alert(height || 100); // 100
// || 會將 `0` `false` `""` `null` `undefined` 都視為 falsy

alert(height ?? 100); // 0

?? 回傳第一個有定義的值
|| 回傳第一個 truthy 的值


最後小結:

『 利用 Logical operators,省下大把大把的 if...else...

『 不用在多個 if else 中,尋尋覓覓最終值的答案 』


上一篇
[題外話] PM 理想型 (下)
下一篇
寫出好讀好寫的 JS (上)
系列文
寫程式帶給我的無形快樂30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言